<template>
	<view class="content" @click="getClick">
		<view class="my2-image1">
			<!--
			    author: 李文昊
			    description: 图标
			-->
			<image :src="my2List.image" mode=""></image>
		</view>
		<view class="my2-text">
			<!--
			    author: 李文昊
			    description: 图标描述
			-->
			<text>{{my2List.text}}</text>
			<i v-if="my2List.pendingNum > 0" class="tip"></i>
		</view>
		<view class="my2-image2">
			<!--
			    author: 李文昊
			    description: 右箭头图标
			-->
			<image src="@/static/rightArrow.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	/**
	 * author: 陈炎
	 * description: 
	 * getClick方法:
	 * 父组件通过getClick监听此组件click事件
	 * 跳转到传入对象url属性对应的地址
	 */
	export default {
		props: {
			my2List: Object
		},
		methods: {
			getClick() {
				this.$emit('getClick')
				uni.navigateTo({
					url: this.my2List.url
				})
			}
		},
	}
</script>

<style>
	.content {
		width: 100%;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 1);
	}

	/* 图标容器 */
	.my2-image1 {
		float: left;
		width: 15%;
		position: relative;
		height: 100rpx;
	}

	/* 图标 */
	.my2-image1 image {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 40rpx;
		height: 40rpx;
	}

	/* 图标描述容器 */
	.my2-text {
		float: left;
		height: 100rpx;
		line-height: 100rpx;
		width: 75%;
	}

	/* 图标描述 */
	.my2-text text {
		font-family: '微软雅黑';
		font-weight: 400;
		font-size: 28rpx;
	}

	/* 右箭头容器 */
	.my2-image2 {
		position: relative;
		float: left;
		width: 10%;
		height: 100rpx;
	}

	/* 右箭头 */
	.my2-image2 image {
		width: 18rpx;
		height: 25rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.tip {
			display:block;
			background:#f00;
			border-radius:50%;
			width:20rpx;
			height:20rpx;
	/* 		top:-20px;
			right:0px; */
			margin-left: -30rpx;
			margin-top: -70rpx;
		}
</style>
